<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <div class="box">
      <div class="inner"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      msg:'jiaxing很帅'
    };
  },
  components: {
  }
}
  // 在脚手架中配置预处理 都是针对我当前的vue-cli环境下的版本号
  // less
  // npm i -D less-loader less
  // sass
  // npm i -D sass-loader@10 npde-sass@5

  // 下载安装完这些包
  // 使用less <style lang="less"></style>
  // 使用sass时 <style lang="sass"></style>
</script>

<style lang="less" scoped>
  .box{
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    .inner{
      width: 50px;
      height: 50px;
      background-color: aquamarine;
    }
  }
  
</style>
